<template>
  <!-- 个人文档 -->
  <div class="personal">
    <nav-bar
      :goBack="true"
      :menuShow="true"
      :isDocument="true"
      :parentId="parentId"
      :title="topTitle"
      isAllCheck
      :fatherIsTouch="isTouch"
      @cancelClick="cancelClick"
      @checkClick="checkClick"
      @handleNewFileClick="handleNewFileClick"
      :form="'个人文档'"
      isCalendar
      isHighSearch
      @onSearch="onSearch"
      @onCancel="onCancel"
      :DirectoryIdArr="DirectoryIdArr"
      @handleGoBack="handleGoBack"
    ></nav-bar>

    <!-- 面包屑 -->
    <breadcrumb :breadcrumb="breadcrumb"></breadcrumb>

    
    <!-- 数据列表 -->
    <div class="personal_outer">
      <div class="personal_content">
        <van-list
          v-model="loadMore"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoadMore"
          offset="1"
        >
          <van-checkbox-group v-model="checkArr" ref="listCheck" @change="handleListCheckbox">
            <data-list
              v-for="(item, index) in listData"
              :key="item.eFileResultType==2 ? item.cloudDirectoryInfo.directoryId: item.cloudFileInfo.fileId"
              :fileCategory="item.eFileResultType == 2 ? 'default' : item.cloudFileInfo.fileCategory"
              :title="item.eFileResultType==2 ? item.cloudDirectoryInfo.name: item.cloudFileInfo.name"
              :label="item.eFileResultType==2 ? item.cloudDirectoryInfo.createTime: item.cloudFileInfo.createTime"
              :index="item.eFileResultType==2 ? item.cloudDirectoryInfo.directoryId: item.cloudFileInfo.fileId"
              :isCollection="item.eFileResultType==2 ? item.cloudDirectoryInfo.isFavourite: item.cloudFileInfo.isFavourite"
              :uploadStatus="item.eFileResultType==2 ? item.cloudDirectoryInfo.uploadStatus: item.cloudFileInfo.uploadStatus"
              :DetailsArr="listData[index]"
              :menuParameter="menuParameter"
              :isTouch="isTouch"
              isCheckbox
              v-longtap="() => handleTouch(item, index)"
              :currentItem="item"
              @handleCellClick="handleCellClick"
              @handleDetailsClick="handleDetailsClick"
            ></data-list>
          </van-checkbox-group>
        </van-list>
      </div>
    </div>
    

    <operation-menu
    v-show="isTouch"
    :currentTitle="'个人文档'"
    :checkArr="checkArr"
    :menuParameter="menuParameter"
    :checkParameterArr="checkParameterArr"
    @KnowledgeTreeCancelCollection="KnowledgeTreeCancelCollection"
    @onCancel="onCancel"
    ></operation-menu>

    <transition name="van-slide-right">
    <van-popup class="detail" v-model="DetailShow" v-if="DetailShow" style="width: 100vw; height: 100vh;" :overlay="false">
      <detail :DetailObj="DetailObj" @handleGoBack="(bol) => DetailShow = bol"></detail>
    </van-popup>
    </transition>

  </div>
</template>

<script>
import NavBar from "components/public/NavBar.vue";
import Breadcrumb from "components/public/Breadcrumb.vue";
import DataList from "components/public/DataList.vue";
import OperationMenu from "components/public/OperationMenu.vue";
import Detail from 'components/public/Details.vue'

export default {
  name: "personal",
  components: {
    NavBar,
    Breadcrumb,
    DataList,
    OperationMenu,
    Detail
  },
  data() {
    return {
      // 通用变量
      // 顶部标题
      topTitle: "个人文档",
      // 是否长按标识
      isTouch: false,
      checkArr: [],
      // 个人文档数据列表
      listData: [],
      // 搜索后数据中间变量
      middleware: [],
      // 将文件id和文件类型传给详情组件
      DetailsArr: [],
      // 将id和treeId传给操作菜单组件，用于操作事件
      menuParameter: {},
      // 长按选中的index下标
      activeIndex: 0,
      // 多选接参数组
      checkParameterArr: [],
      // 上拉加载
      loadMore: false,
      finished: false,
      PageIndex: 1,
      PageSize: 10,
      total: 0,
      // 点击的DirectoryId, 目录ID, 用于点击进入文件夹
      DirectoryId: '',
      DirectoryIdArr: [''],

      // 用于上传功能
      parentId: 1,

      // 面包屑
      breadcrumb: ['文件','个人文档'],
      fooBreadcrumb: ['文件','个人文档'],

      DetailShow: false,
      DetailObj: {}
    };
  },
  created() {
    this.getRecentDocuments(false);
  },
  methods: {
    handleDetailsClick(obj){
      // console.log(obj)
      this.DetailObj = obj
      this.DetailShow = true
    },
    // 通用事件
    // 列表长按事件
    handleTouch(item, index) {
      console.log("长按了");
      // console.log(item)
      this.activeIndex = index
      let id = item.eFileResultType == 2 ? item.cloudDirectoryInfo.directoryId : item.cloudFileInfo.fileId
      this.checkArr.push(id)
      this.isTouch = true;
      // console.log(index)
    },
    // 监听多选按钮点击事件
    handleListCheckbox(arr){
        // console.log(arr)
        this.checkParameterArr = []
        this.checkArr.forEach((itemWai) => {
          // 获取当前选中的下标
          let index = this.listData.findIndex(item => {
            if(item.eFileResultType == 2){
              return item.cloudDirectoryInfo.directoryId == itemWai
            }else{
              return item.cloudFileInfo.fileId == itemWai
            }
          })
          // console.log(index)
          // 提取指定下标指定属性
          let obj = {
              isFavourite: this.listData[index].eFileResultType == 2 ? this.listData[index].cloudDirectoryInfo.isFavourite : this.listData[index].cloudFileInfo.isFavourite,   // 文件或者文件夹是否收藏
              directoryId: this.listData[index].cloudDirectoryInfo == null ? null : this.listData[index].cloudDirectoryInfo.directoryId,
              fileId: this.listData[index].cloudFileInfo == null ? null : this.listData[index].cloudFileInfo.fileId,
              hdfsUrl: this.listData[index].hdfsUrl = null ? 'null' : this.listData[index].hdfsUrl
          }
          this.checkParameterArr.push(obj)
        })
        // console.log(this.checkArr)
        // console.log(this.checkParameterArr)

        this.menuParameter.idArr = arr[0]
        this.menuParameter.resourcesId = this.DetailsArr[this.activeIndex].fileId // 转为resourcesId
        this.menuParameter.type = this.DetailsArr[this.activeIndex].type
        this.menuParameter.hdfsUrl = this.DetailsArr[this.activeIndex].hdfsUrl

        // console.log(this.menuParameter)
    },
    // 子组件传的取消事件
    cancelClick(bol) {
      // console.log(bol)
      this.isTouch = bol;
    },
    //
    checkClick(bol) {
      this.$refs.listCheck.toggleAll(bol);
    },
    // 上拉加载
    onLoadMore(){
      if(this.listData.length < this.total){
        this.PageIndex = this.PageIndex + 1
        this.getRecentDocuments(true)
      }else{
        // 数据全部加载完成
        this.finished = true
      }
      
    },
    
    // 获取个人文档数据列表
    getRecentDocuments(bol) {
      this.$request({
        method: "get",
        url: "/api/RecentDocument/GetPersonalDocuments",
        params: {
          Token: sessionStorage.getItem("mobileToken"),
          DirectoryId: this.DirectoryId, //目录ID
          Name: "", //搜索
          PageIndex: this.PageIndex,
          PageSize: this.PageSize
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.total = data.totalCount

          
          // 时间转化
          data.dataList.forEach(item => {
            let splitCreateTimeArr = []
            if(item.eFileResultType == 1){
              splitCreateTimeArr = item.cloudDirectoryInfo.createTime.split('T')
              item.cloudDirectoryInfo.createTime = splitCreateTimeArr[0] + ' ' + splitCreateTimeArr[1]
            }else{
              splitCreateTimeArr = item.cloudFileInfo.createTime.split('T')
              item.cloudFileInfo.createTime = splitCreateTimeArr[0] + ' ' + splitCreateTimeArr[1]
            }
            // 文件或文件夹类型判断
            switch(item.eFileResultType){
              case 0:
                item.eFileResultType = 1;break;
              case 1:
                item.eFileResultType = 2;break;
            }

          })

          if(bol){
            this.listData.push(...data.dataList)
          }else{
            this.listData = data.dataList
          }
          
          this.DetailsArr = this.listData.map(item => {
            let obj = {
              fileId: item.cloudFileInfo == null ? item.cloudDirectoryInfo.directoryId : item.cloudFileInfo.fileId,
              type: item.eFileResultType,
              hdfsUrl: item.eFileResultType == 2 ? null : item.hdfsUrl,
            }
            return obj
          })

        } else {
          this.$toast.fail("加载数据失败，请重试。");
        }

        // 加载状态结束
        this.loadMore = false

        // 重新判断可否上拉加载
        if(this.listData.length < this.total){
          this.finished = false
        }else{
          // 数据全部加载完成
          this.finished = true
        }
      });
    },
    KnowledgeTreeCancelCollection(bol){
      if(bol){
        if(this.listData[this.activeIndex].eFileResultType == 2){
          this.listData[this.activeIndex].cloudDirectoryInfo.isFavourite = false
        }else{
          this.listData[this.activeIndex].cloudFileInfo.isFavourite = false
        }
        this.isTouch = false
      }
    },
    handleNewFileClick(bol){
      if(bol){
        this.getRecentDocuments(false);
      }
    },
    // 搜索提交后展示的数据
    onSearch(list){
        // console.log(list)
        this.middleware = this.listData
        this.listData = list
        // this.breadcrumb = this.fooBreadcrumb
    },
    // 搜索取消事件
    onCancel(bol){
        if(bol){
            this.PageIndex = 1
            this.PageSize = 10
            this.getRecentDocuments(false)
            if(this.isTouch){
              this.isTouch = false
            }
            // this.breadcrumb = this.fooBreadcrumb
        }
    },
    // 子组件cell点击事件, 用于进入文件夹
    handleCellClick(item){
      // 重置当前页码
      this.PageIndex = 1
      // console.log(item)
      let breadcrumbTitle = item.eFileResultType == 2 ? item.cloudDirectoryInfo.name : item.cloudFileInfo.name
      this.breadcrumb.push(breadcrumbTitle)
      // console.log(this.breadcrumb)
      // parentId用于上传
      this.parentId = item.eFileResultType == 2 ? item.cloudDirectoryInfo.directoryId : item.cloudFileInfo.directoryId
      if(item.eFileResultType != 2) return this.$notify({type: 'warning', duration: 1000, message: '非文件夹不能进入！'})
      this.DirectoryId = item.cloudDirectoryInfo.directoryId
      // 储存DirectoryId
      this.DirectoryIdArr.push(this.DirectoryId)
      this.getRecentDocuments(false)
    },
    // 子组件返回上一级事件， 
    handleGoBack(arr){
      // console.log(arr)
      this.DirectoryId = arr[arr.length-1]
      this.PageIndex = 1
      this.PageSize = 10
      this.getRecentDocuments(false)
      
      this.breadcrumb.pop()
    }
  },
  watch: {
    isTouch(newVal) {
      if (newVal) {
        this.topTitle = `已选中${this.checkArr.length}项`;
      } else {
        this.topTitle = "个人文档";
        // 非长按情况下情况多选款的值
        this.checkArr = [];
      }
      // console.log(newVal)
    },
    checkArr(newVal) {
      if (this.isTouch) {
        this.topTitle = `已选中${this.checkArr.length}项`;
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>